<template>
	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
		<view class="u-keyboard-grids">
			<block>
				<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
					<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover"
						class="u-keyboard-grids-btn" v-for="(item, j) in group" :key="j">
						{{ item }}
					</view>
				</view>
			
			
				<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
					<!-- <text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
					/
					<text class="en" :class="[abc ? 'active' : 'inactive']">英</text> -->
					<image src="../../../static/images/small.png" v-if="abc"></image>
						<image src="../../../static/images/big.png" v-if="!abc"></image>
				</view>
				<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
					hover-class="u-hover-class">
					<u-icon :size="38" name="backspace" :bold="true"></u-icon>
				</view>
			</block>
		

		
		</view>
		<view class="u-keyboard-grids" style="padding-top: 0rpx;">
		<view class="u-keyboard-grids-item">
			
			<view :hover-stay-time="100"  hover-class="u-carinput-hover"
				class="u-keyboard-grids-btn2" @tap="otherInputClick('.')">
			.
			</view>
			<view :hover-stay-time="100"  hover-class="u-carinput-hover"
				class="u-keyboard-grids-btn2"  @tap="otherInputClick2()">
			 <text>'</text>
			</view>
			<view :hover-stay-time="100"  hover-class="u-carinput-hover"
				class="u-keyboard-grids-btn-empty"  @tap="otherInputClick(' ')">
				<view class="empty">
					<image src="../../../static/images/empty.png"></image>
				</view>
			</view>
			<view :hover-stay-time="100"  hover-class="u-carinput-hover"
				class="u-keyboard-grids-btn2"  @tap="otherInputClick('-')">
			 -
			</view>
		
			</view>
		
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "u-keyboard",
		props: {
			// 是否打乱键盘按键的顺序
			random: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
				abc: true
			};
		},
		computed: {
			areaList() {
				let data = [
					'Q',
					'W',
					'E',
					'R',
					'T',
					'Y',
					'U',
					'I',
					'O',
					'P',
					'A',
					'S',
					'D',
					'F',
					'G',
					'H',
					'J',
					'K',
					'L',
					'Z',
					'X',
					'C',
					'V',
					'B',
					'N',
					'M'
				];
				let tmp = [];
				// 打乱顺序
				if (this.random) data = this.$u.randomArray(data);
				// 切割成二维数组
				tmp[0] = data.slice(0, 10);
				tmp[1] = data.slice(10, 20);
				tmp[2] = data.slice(20, 30);
				tmp[3] = data.slice(30, 36);
				return tmp;
			},
			EngKeyBoardList() {
				let data = [
			
					'q',
					'w',
					'e',
					'r',
					't',
					'y',
					'u',
					'i',
					'o',
					'p',
					'a',
					's',
					'd',
					'f',
					'g',
					'h',
					'j',
					'k',
					'l',
					'z',
					'x',
					'c',
					'v',
					'b',
					'n',
					'm'

				];
				let tmp = [];
				if (this.random) data = this.$u.randomArray(data);
				tmp[0] = data.slice(0, 10);
				tmp[1] = data.slice(10, 19);
				tmp[2] = data.slice(19, 29);
				//tmp[3] = data.slice(30, 40);
				return tmp;
			}
		},
		methods: {
			// 点击键盘按钮
			carInputClick(i, j) {
				let value = '';
				// 不同模式，获取不同数组的值
				if (this.abc) value = this.EngKeyBoardList[i][j];
				else value = this.areaList[i][j];
				this.$emit('change', value);
			},
			otherInputClick(value) {
	
				this.$emit('change', value);
			},
			otherInputClick2() {
				
				this.$emit('change', "'");
			},
			// 修改汽车牌键盘的输入模式，中文|英文
			changeCarInputMode() {
				this.abc = !this.abc;
			},
			// 点击退格键
			backspaceClick() {
				this.$emit('backspace');
				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
				this.timer = null;
				this.timer = setInterval(() => {
					this.$emit('backspace');
				}, 250);
			},
			// 点击空格键
			changeEmptyInputMode() {
				let value = ' ';
		
				this.$emit('change', value);
				
			},
			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
	.u-keyboard{
	
	}
	.u-keyboard-change image{
		width: 36rpx;
		height: 36rpx;
	}

	.u-keyboard-grids {
		background: rgb(215, 215, 217);
		padding: 28rpx 0;
		position: relative;
	}

	.u-keyboard-grids-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
	}

	.u-keyboard-grids-btn {
		text-decoration: none;
		width: 62rpx;
		flex: 0 0 64rpx;
		height: 100rpx;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		font-size: 36rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #fff;
		margin: 10rpx 5rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 0rpx #888992;
		font-weight: 500;
		justify-content: center;
	}
		.u-keyboard-grids-btn2{
			text-decoration: none;
			width: 87rpx;
			flex: 0 0 84rpx;
			height: 100rpx;
			/* #ifndef APP-NVUE */
			display: inline-flex;
			/* #endif */
			font-size: 36rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			margin: 10rpx 5rpx;
			border-radius: 8rpx;
			box-shadow: 0 2rpx 0rpx #888992;
			font-weight: 500;
			justify-content: center;
		}
	.u-keyboard-grids-btn-empty {
		text-decoration: none;
		width: 202rpx;
		// flex: 0 0 64rpx;
		height: 100rpx;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		font-size: 36rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #fff;
		margin: 10rpx 5rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 0rpx #888992;
		font-weight: 500;
		justify-content: center;
	}
	.empty{
		padding-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.empty image{
		width: 84rpx;
		height: 64rpx;
	}

	.u-carinput-hover {
		background-color: rgb(185, 188, 195) !important;
	}
.b-bottom{
		position: absolute;
		background-color: #888992;
	
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
}
	.u-keyboard-back {
		position: absolute;
		width: 96rpx;
		right: 22rpx;
		bottom: 32rpx;
		height: 100rpx;
		background-color: rgb(185, 188, 195);
		@include vue-flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: center;
		box-shadow: 0 2rpx 0rpx #888992;
	}

	.u-keyboard-change {
		font-size: 28rpx;
		box-shadow: 0 2rpx 0rpx #888992;
		position: absolute;
		width: 96rpx;
		left: 22rpx;
		line-height: 1;
		bottom: 32rpx;
		height: 100rpx;
		background-color: #ffffff;
		@include vue-flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: center;
	}

	.u-keyboard-change .inactive.zh {
		transform: scale(0.85) translateY(-10rpx);
	}

	.u-keyboard-change .inactive.en {
		transform: scale(0.85) translateY(10rpx);
	}

	.u-keyboard-change .active {
		color: rgb(237, 112, 64);
		font-size: 36rpx;
	}

	.u-keyboard-change .zh {
		transform: translateY(-10rpx);
	}

	.u-keyboard-change .en {
		transform: translateY(10rpx);
	}
</style>